<template>
    <div class="home">
        <van-sticky class="search-box">
            <van-search class="search" v-model="keywords" shape="round" @search="getGoodsList('search')" show-action placeholder="请输入搜索关键词">
                <template #label>
                    <van-popover
                        v-model="showPopover"
                        trigger="click"
                        :actions="actions"
                        @select="type => { searchType = type }"
                    >
                        <template #reference>
                            <span>{{ searchType.text }}</span>
                        </template>
                    </van-popover>
                </template>
                <template #action>
                    <div @click="onAdd" style="color: blue;">新增</div>
                </template>
            </van-search>
        </van-sticky>
<!--        <div class="list-header">-->
<!--            <div class="header-item"></div>-->
<!--        </div>-->
        <div class="list">
            <van-list v-model="loading" :finished="finished" offset="50" @load="getGoodsList('loadmore')">
                <van-swipe-cell v-for="(item, idx) in listData"  :key="item.code + idx">
                    <van-card
                        :thumb="imgUrl + item.photoUrl"
                        @click="prodClick(item)"
                        class="list-item"
                        centered
                    >
                        <template #title>
                            <div class="prod-title">
                                {{item.name || '-'}} #
                                {{item.code || '-'}}
                            </div>
                        </template>
                        <template #desc>
                            <div class="prop-desc">{{item.storeName || '-'}} - {{item.type == 1 ? '样衣' : item.type == 2 ? '商品' : '-'}}</div>
                        </template>
                        <template #price>
                            <div class="prod-price">x{{item.amount || 0}}<span style="margin-left: 10px; color: red;">￥{{item.totalPrice || '123123123'}}</span></div>
                        </template>
                    </van-card>
                    <template #right>
                        <van-button square type="danger" size="small" text="删除" @click="delHandle(item)" style="height: 100%;" />
                    </template>
                </van-swipe-cell>
            </van-list>
        </div>
    </div>
</template>

<script>
    import $axios from '@/assets/js/$axios.js';
    import { getCookie } from '@/assets/js/cookieOpt.js';
    import config from '@/view/config_img_url.js';

export default {
    data() {
        return {
            imgUrl: config.imgUrl,
            keywords: '',
            searchType: { text: '名称', value: '1' },
            showPopover: false,
            actions: [
                { text: '名称', value: '1' },
                { text: '编号', value: '2' },
                { text: '类型', value: '3' },
                { text: '商家', value: '4' },
            ],
            loading: false,
            finished: false,
            listData: [],
            pageNum: 1,
            pageSize: 20
        }
    },
    computed: {
    },
    created() {
        this.getGoodsList(); // 获取商品列表
        // console.log(config);
    },
    methods: {
        getGoodsList(pull) {
            this.loading = true;
            if (pull === 'loadmore') this.pageNum++; // pull操作的时候pageNum才++
            else this.pageNum = 1;
            
            $axios.post2('/complain_test/api/goods/list', {
                pageNo: this.pageNum,
                lenght: 20,
                contentName: this.searchType.value,
                contentValue: this.keywords,
                accessToken: getCookie('token')
            }).then(res => {
                this.loading = false;
                
                if (pull === 'loadmore') {
                    this.listData.push(...res.data.data);
                } else {
                    this.listData.splice(0);
                    this.listData.push(...res.data.data);
                }
    
                // console.log(this.listData);
    
                if (this.listData.length >= res.data.recordsFiltered) this.finished = true;
            })
        },
        deleteQuery(id) {
            $axios.post2('/complain_test/api/goods/deleteGood', { id }).then(res => {
                if (res.code == 200) {
                    this.$toast(res.msg);
                    this.getGoodsList(); // 更新商品列表
                }
            })
        },
        delHandle(prod) {
            this.$dialog.confirm({
                title: '删除',
                message: '确认产出该商品吗？',
            })
            .then(() => {
                // console.log('prod', prod);
                this.deleteQuery(prod.id);
            }).catch(() => {})
        },
        prodClick(prod) {
            // console.log('prodClick', 'http://175.24.191.81:8888/' + prod.photoUrl);
            this.$router.push({ name: 'detail', params: { ...prod } });
            
        },
        onAdd() {
            this.$router.push({ path: '/add' });
            // console.log('onAdd')
            // $axios.post('/devApi/api/oauth/validateToken', {
            //     clientId: 'mobile-client',
            // }).then(res => {
            //     console.log('res', res);
            // })
        }
    }
}
</script>

<style lang="less" scoped>
    .home {
        width: 100vw;
        min-height: 100vh;
        background-color: #f3f5f7;
    }
    
    .search-box {
    }
    
    .list {
        /*padding: 0 .2rem;*/
    }
    
    .list-item {
        padding: 2px 16px;
        margin-bottom: .1rem;
    }
    
    .prod-title {
        font-size: .28rem;
        font-weight: bold;
        line-height: .44rem;
    }
    
    .prod-desc {
        font-size: .26rem;
    }
    
    .prod-price {
        font-weight: normal;
        font-size: .28rem;
        line-height: .44rem;
    }
</style>
